<template>
  <!-- 添加考勤班次 选择人员的弹窗 -->
  <el-dialog
    v-model="dialogVisible"
    title="人员选择"
    width="40%"
    destroy-on-close
    append-to-body
    @closed="$emit('closed')"
  >
    <div class="sc-user-select">
      <div class="sc-user-select__left">
        <div class="sc-user-select__search">
          <el-input
            v-model="keyword"
            prefix-icon="el-icon-search"
            placeholder="搜索成员"
          >
            <template #append>
              <el-button icon="el-icon-search" @click="search"></el-button>
            </template>
          </el-input>
        </div>
        <div class="sc-user-select__select">
          <div class="sc-user-select__tree" v-loading="showGrouploading">
            <el-scrollbar>
              <el-tree
                class="menu"
                ref="groupTree"
                :data="group"
                :node-key="groupProps.key"
                :props="groupProps"
                highlight-current
                :expand-on-click-node="false"
                :current-node-key="groupId"
                @node-click="groupClick"
              />
            </el-scrollbar>
          </div>
          <div class="sc-user-select__user" v-loading="showUserloading">
            <div class="sc-user-select__user__list">
              <el-scrollbar ref="userScrollbar">
                <el-tree
                  class="menu"
                  ref="userTree"
                  :data="user"
                  :node-key="userProps.key"
                  :props="userProps"
                  :default-checked-keys="selectedIds"
                  show-checkbox
                  check-on-click-node
                  @check-change="userClick"
                ></el-tree>
              </el-scrollbar>
            </div>
            <footer class="footerBox">
              <el-pagination
                background
                layout="prev,next"
                small
                :total="total"
                :page-size="pageSize"
                v-model:currentPage="currentPage"
                @current-change="paginationChange"
              ></el-pagination>
            </footer>
          </div>
        </div>
      </div>
      <div class="sc-user-select__toicon">
        <el-icon><el-icon-arrow-right /></el-icon>
      </div>
      <div class="sc-user-select__selected">
        <header>已选 ({{ selected.length }})</header>
        <ul>
          <el-scrollbar>
            <li v-for="(item, index) in selected" :key="item.id">
              <span class="name">
                <el-avatar size="small">{{
                  item.name.substring(0, 1)
                }}</el-avatar>
                <label>{{ item.name }}</label>
              </span>
              <span class="delete">
                <el-button
                  type="danger"
                  icon="el-icon-delete"
                  circle
                  size="small"
                  @click="deleteSelected(index)"
                ></el-button>
              </span>
            </li>
          </el-scrollbar>
        </ul>
      </div>
    </div>

    <template #footer>
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="save">确 认</el-button>
    </template>
  </el-dialog>
</template>

<script>
import config from "@/config/workflow"
import { resetDeptTree } from '@/utils/resetTree'
export default {
  data () {
    return {
      groupProps: config.group.props,
      userProps: config.user.props,
      dialogVisible: false,
      showGrouploading: false,
      showUserloading: false,
      keyword: '',
      groupId: '',
      pageSize: config.user.pageSize,
      total: 0,
      currentPage: 1,
      group: [],
      user: [],
      selected: [],
      value: [],
      isAllSelect: false,
      userList: []
    }

  },
  computed: {
    selectedIds () {
      return this.selected.map(t => t.id)
    }
  },
  mounted () {

  },
  methods: {
    //打开赋值
    async open (list, data) {
      this.value = data || []
      this.selected = JSON.parse(JSON.stringify(data || []))
      this.dialogVisible = true
      this.groupId = ''
      this.getGroup()
      await this.getUser()
      this.showSelected(list)
    },
    //获取组织(部门)
    async getGroup () {
      this.showGrouploading = true
      var res = await config.group.apiObj.get()
      this.showGrouploading = false
      // var allNode = { [config.group.props.key]: '', [config.group.props.label]: '所有' }
      // res.data.unshift(allNode)
      // this.group = config.group.parseData(res).rows
      this.group = resetDeptTree(config.group.parseData(res).rows)
    },
    //获取用户
    async getUser () {
      this.showUserloading = true
      var params = {
        [config.user.request.keyword]: this.keyword || null,
        [config.user.request.groupId]: this.groupId || null,
        [config.user.request.page]: this.currentPage,
        [config.user.request.pageSize]: this.pageSize
      }

      var res = await config.user.apiObj.get(params)
      console.log(res)
      this.userList = [...this.userList, ...res.data]
      console.log(this.userList)
      if (params.departmentId) {
        this.userList.forEach(item => {
          this.selected.push({
            id: item.id,
            name: item.username,
            departmentId: item.departmentId,
            departmentName: item.departmentName
          })
        })
        this.selected = this.selected.filter(
          (obj, index) =>
            this.selected.findIndex((item) => item.id == obj.id) == index
        )
      }

      this.showUserloading = false
      this.user = config.user.parseData(res).rows
      this.total = config.user.parseData(res).total || 0
      this.$refs.userScrollbar.setScrollTop(0)
    },
    //组织点击
    groupClick (data) {
      this.keyword = ''
      this.currentPage = 1
      this.groupId = data[config.group.props.key]
      this.userList = []
      this.getUser()
    },
    //用户点击
    userClick (data, checked) {
      if (checked) {
        this.selected.push({
          id: data.id,
          name: data.username,
          departmentId: data.departmentId,
          departmentName: data.departmentName
        })
        this.selected = this.selected.filter(
          (obj, index) =>
            this.selected.findIndex((item) => item.id == obj.id) == index
        )
      } else {
        this.selected = this.selected.filter(item => item.id != data.id)
      }
    },

    //用户分页点击
    paginationChange () {
      this.getUser()
    },
    //用户搜索
    search () {
      this.groupId = ''
      this.$refs.groupTree.setCurrentKey(this.groupId)
      this.currentPage = 1
      this.getUser()
    },
    //删除已选
    deleteSelected (index) {
      this.selected.splice(index, 1)
      this.$refs.userTree.setCheckedKeys(this.selectedIds)

    },
    //提交保存
    save () {
      this.value.splice(0, this.value.length)
      this.selected.map(item => {
        this.value.push(item)
      })
      this.dialogVisible = false
      this.$emit('showPerson', this.selected)

    },

    // 编辑班次时回显已选人员
    showSelected (list) {
      console.log(list)
      this.selected = []
      let adminIds = []
      if (list) {
        // list.forEach(item => {
        //   let data = item.adminId.split(',')
        //   adminIds.push(...data)
        // })
        adminIds = list
      }
      adminIds.forEach(item => {
        this.user.forEach(u_item => {
          if (item == u_item.id) {
            this.selected.push({
              id: u_item.id,
              name: u_item.username,
              departmentId: u_item.departmentId,
              departmentName: u_item.departmentName
            })
          }
        })
      })
      console.log(this.user)
      console.log(this.selected)
    }
  }
}
</script>

<style scoped>
.sc-user-select {
  display: flex;
}
.sc-user-select__left {
  /* width: 400px; */
  width: 75%;
}
.sc-user-select__right {
  flex: 1;
}

.sc-user-select__search {
  padding-bottom: 10px;
}

.sc-user-select__select {
  display: flex;
  border: 1px solid var(--el-border-color-light);
  background: var(--el-color-white);
}
.sc-user-select__tree {
  /* width: 200px; */
  width: 50%;
  height: 300px;
  border-right: 1px solid var(--el-border-color-light);
}
.sc-user-select__user {
  /* width: 200px; */
  width: 50%;
  height: 300px;
  display: flex;
  flex-direction: column;
}
.sc-user-select__user__list {
  flex: 1;
  overflow: auto;
}
.sc-user-select__user footer {
  height: 36px;
  padding-top: 5px;
  border-top: 1px solid var(--el-border-color-light);
}

.sc-user-select__toicon {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 10px;
}
.sc-user-select__toicon i {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #ccc;
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 20px;
  border-radius: 50%;
  color: #fff;
}

.sc-user-select__selected {
  height: 345px;
  width: 30%;
  /* width: 200px; */
  border: 1px solid var(--el-border-color-light);
  background: var(--el-color-white);
}
.sc-user-select__selected header {
  height: 43px;
  line-height: 43px;
  border-bottom: 1px solid var(--el-border-color-light);
  padding: 0 15px;
  font-size: 12px;
}
.sc-user-select__selected ul {
  height: 300px;
  overflow: auto;
}
.sc-user-select__selected li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 5px 5px 15px;
  height: 38px;
}
.sc-user-select__selected li .name {
  display: flex;
  align-items: center;
}
.sc-user-select__selected li .name .el-avatar {
  background: #409eff;
  margin-right: 10px;
}
/* .sc-user-select__selected li .name label {
} */
.sc-user-select__selected li .delete {
  display: none;
}
.sc-user-select__selected li:hover {
  background: var(--el-color-primary-light-9);
}
.sc-user-select__selected li:hover .delete {
  display: inline-block;
}

[data-theme="dark"] .sc-user-select__selected li:hover {
  background: rgba(0, 0, 0, 0.2);
}
[data-theme="dark"] .sc-user-select__toicon i {
  background: #383838;
}
.footerBox {
  padding-left: 10px;
}
</style>
